<script setup lang="ts">
import type Rightcard from '@/components/Rightcard.vue';
import getDiscussionCate from '@/api/getDiscussionCate';
import { ref, onMounted } from 'vue';
import { userinfo } from '@/stores/counter';
import getPodcastIntros from '@/api/getPodcastIntros'

const { getIntros } = getPodcastIntros()
const { getDiscussionCateList } = getDiscussionCate();
const discussions = ref([]);
const user = userinfo()

onMounted(async () => {
    if (user.discussionCates.length == 0) {
        discussions.value = await getDiscussionCateList();
        user.discussionCates = discussions.value
    }
    else {
        discussions.value = user.discussionCates
    }
    // if (user.pages.roomIntro.length == 0) {
        getIntros()
    // }
});
</script>

<template>
    <div class="salon-div">
        <div class="salon-sign"></div>
        <div class="salon-intro">
            {{ user.pages.roomIntro }}
        </div>
        <div class="salon-line"></div>
        <div class="salon-container">
            <div class="salon-discussion">
                <div class="salon-content">
                    <div class="salon-text" v-loading="discussions.length == 0">
                        <DiscussionCate v-for="discussion in discussions" :data="discussion" />
                    </div>
                </div>
            </div>
            <div class="salon-card">
                <Rightcard />
                <div class="card2" v-if="false">
                    <div class="topic-title unselectable">
                        加入讨论/发起议题：
                        <div class="topic-titlebg"></div>
                    </div>
                    <input type="text" placeholder="输入标题" />
                    <input type="text" placeholder="输入内容" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.topic-titlebg {
    height: 20px;
    background-color: #ffbe7f;
    position: absolute;
    bottom: -10px;
    z-index: -1;
}

.salon-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.salon-container {
    display: flex;
    margin-top: 20px;
    width: 1200px;
}

.salon-sign {
    background-image: url(/assets/imgs/salonbg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 450px;
    width: 700px;
}

.salon-line {
    height: 2px;
    width: 1200px;
    background-color: #f2ac1c;
}

.salon-discussion {
    /* background-color: red; */
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.salon-content {
    /* background-color: aqua; */
    width: 100%;
    flex: 1;
    display: flex;
}

.salon-text {
    width: 100%;
}

.salon-title {
    /* margin: 0 0 20px 0;   */
    font-size: 18px;
    font-weight: 700
}

.salon-card {
    flex-shrink: 0;
    margin-left: 20px;
    width: 30%;
}

.salon-intro {
  margin: 30px 0px;
  color: #6a6363;
  line-height: 33px;
  text-align: left;
  white-space: pre-wrap;
  width: 60%;
  max-width: 1150px;
}

.card2 {
    width: 100%;
    /* background-color: rebeccapurple; */
    border-radius: 5px;
    border: 3px solid #f5900a;
    margin-top: 30px;
    /* padding: 0 20px; */
    display: flex;
    flex-direction: column;
    align-items: start;
}

.card2>input {
    display: flex;
    width: calc(100% - 60px);
    margin: 10px 20px;
    padding: 5px 10px;
    height: 30px;
    background-color: #e1dcdc;
    border: 0px;
    font-size: 18px;
}

.card2>input::placeholder {
    color: white;
}

.card2>input:focus {
    outline: none;
    /* 可选，去除选中时的默认外边框 */
}

.launch-title {
    margin: 10px 20px;
    font-size: 16px;
}
</style>
